<template>
  <div >
    <h1 class="title">误封堵申诉审批</h1>
    <a-card >
        <div class="text">申诉主题：{{ DetailsData.complaintSubject }}</div>
        <div class="text">涉诈域名：{{ DetailsData.fraudDomainName }}</div>
        <div class="text">申诉原因：{{ DetailsData.reasonAppeal }}</div>
        <div class="text">申诉人：{{ DetailsData.complainant }}</div>
        <div class="text">申述人证件：{{ DetailsData.documentComplainant }}</div>
        <div  class="text" style="margin-bottom:3%">申诉时间：{{ DetailsData.appealTime?timestampToTime2(Number(DetailsData.appealTime)):'' }}</div>
        <!-- <div  class="text" style="margin-bottom:3%">申诉时间：{{ DetailsData.appealTime }}</div> -->
    </a-card>
    <h1 class="title">审批记录</h1>
    <a-card class="card">
        <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-steps :current="1" style="width:30%">
                <a-popover slot="progressDot" slot-scope="{ index,prefixCls }">
                    <template slot="content" v-if="index == 1">
                        <div v-if="type == 'details'">
                            <div>审批人 :  {{ form.approvalPerson }}</div>
                            <div>单   位 : {{ form.departName }}</div>
                            <div>时   间 : {{ form.approverTime }}</div>
                            <div>理   由 : {{ form.remark }}</div>
                        </div>
                    </template>
                    <span :class="`${prefixCls}-icon-dot`" />
                </a-popover>
                <a-step title="提交申请"/>
                <!-- <a-step title="审批人" description="同意" /> -->
                <a-step title="审批人">
                    <div slot="description" style="color:green">
                        同意
                    </div>
                </a-step>
            </a-steps>
            <!-- :disabled="true" -->
            <a-form-model-item label="审批结果" >
                <a-radio-group   v-model="form.status" :disabled="flag">
                            <a-radio :value="2">
                                通过
                            </a-radio>
                            <a-radio :value="3">
                                驳回
                            </a-radio>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="审批理由" :label-col="{ span: 2 }" >
                    <!-- <a-textarea placeholder="Autosize height based on content lines" style="width:100%"/> -->
                    <a-textarea placeholder="Controlled autosize" :auto-size="{ minRows: 3, maxRows: 10 }"  v-model="form.remark" :disabled="flag"/>
            </a-form-model-item>
        </a-form-model>
        <div>
            <a-button type="primary" style="margin-left:10%;margin-top:5%;margin-bottom:10%" @click="approval" v-if="type == 'approval'">提交</a-button>
            <a-button type="primary" style="margin-left:10%;margin-top:5%;margin-bottom:10%" @click="close" v-if="type == 'details'">关闭</a-button>
        </div>
    </a-card>
  </div>
</template>

<script>
import { getApprovalInfo,approval } from '@/api/plugging/Police'
export default {
created () {
    this.DetailsData.appealTime = this.$route.query.appealTime
    this.DetailsData.complainant = this.$route.query.complainant
    this.DetailsData.complaintSubject = this.$route.query.complaintSubject
    this.DetailsData.documentComplainant = this.$route.query.documentComplainant
    this.DetailsData.fraudDomainName = this.$route.query.fraudDomainName
    this.DetailsData.reasonAppeal = this.$route.query.reasonAppeal
},
mounted(){
    this.type = this.$route.query.type
    if(this.type == 'approval'){
        this.flag = false
        this.processId = this.$route.query.id
    }
    if(this.type == 'details'){
        this.flag = true
        let id = this.$route.query.id
        this.refreshTable(id)
    }
    // this.refreshTable(obj)
},
data () {
    return {
        flag:false,
        type:'',
        processId:'',
        labelCol: { span: 2 },
        wrapperCol: { span: 16 },
        form:{},
        DetailsData:{}
    }
},
methods: {
    close(){
        this.$router.push({
            path:'/plugging/police/Approval/AppealApproval'
        })
    },
    approval() {
        this.form.processId = this.processId
        approval(this.form).then( res => {
          if (res.success) {
            this.$message.success(res.message)
            // this.DetailsData =  JSON.parse(res.result.jsonParam).misblockComplaint
            // console.log(this.DetailsData);
            this.loading = false
          } else {
            this.$message.success(res.message)
            this.loading = false
          }
        })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
      timestampToTime2(timestamp) {
        if (timestamp === 0 || timestamp == null) {
            return ''
        } else {
            var date = new Date(timestamp)
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
            var H = date.getHours() + ':'
            var M2 = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
            var S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
            return Y + M + D + H + M2 + S
        }
        },
        refreshTable(id) {
        getApprovalInfo(id).then( res => {
          if (res.success) {
            console.log(res.result);
            this.form = res.result.processApprovalNode
            console.log(this.form);
            // this.DetailsData =  JSON.parse(res.result.jsonParam).misblockComplaint
            // console.log(this.DetailsData);
            this.loading = false
          } else {
            this.$message.success(res.message)
            this.loading = false
          }
        })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
}
}
</script>

<style lang="less" scoped>
.title{
    font-weight: 800;
}
.text{
    margin-bottom: 10px;
    font-size: 15px;
    // font-weight: 550;
    color:black;
}
.card{
    padding-top: 5%;
}
</style>